<template>
  <div id="question">
    <head-tabar></head-tabar>
    <div
      style="border: 2px solid #b3b3b3;position: absolute;margin-top: 100px;padding: 20px;width: 1000px;margin-left: 15%;border-radius: 10px;">
      <div style="border-bottom: 1px solid #d6d6d6">
        <h3 style="margin-left: 20px;color:#7b9e31;">题库</h3>
        <el-button type="success" size="mini" style="float: right;margin-top: -40px" @click="toAdd()">添加题目</el-button>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="所有题目" name="All">
          <el-table
            :data="allQuestion"
            style="width: 100%">
            <el-table-column
              prop="questionTitle"
              label="题目标题"
              width="250px">
            </el-table-column>
            <el-table-column
              prop="questionSort.questionSortName"
              label="题目类型">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="发题人"
              width="110px">
            </el-table-column>
            <el-table-column
              prop="questionHardLevel"
              label="难易等级"
              width="100px">
            </el-table-column>
            <el-table-column
              prop="gmtCreate"
              label="创建时间">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick2(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small" @click="deleteQuestion(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane v-for="questionSort in this.questionSorts" :key="questionSort.questionSortId"
                     :label="questionSort.questionSortName" :name="questionSort.questionSortName">
          <el-table
            :data="question"
            style="width: 100%">
            <el-table-column
              prop="questionTitle"
              label="题目标题"
              width="250px">
            </el-table-column>
            <el-table-column
              prop="questionSort.questionSortName"
              label="题目类型">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="发题人"
              width="110px">
            </el-table-column>
            <el-table-column
              prop="questionHardLevel"
              label="难易等级"
              width="100px">
            </el-table-column>
            <el-table-column
              prop="gmtCreate"
              label="创建时间">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick2(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small" @click="deleteQuestion(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-button type="info" size="mini" @click="returnUrl()" style="margin-top: 10px">返回</el-button>
      <div style="margin-top: 20px;float: right">
        <el-button type="info" size="mini" @click="toRecycleBin()">回收站</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import HeadTabar from "../../components/HomeTaber/HeadTabar";
import axios from "axios";
import questionDetails from "./QuestionDetails";

export default {
  name: "Question",
  data() {
    return {
      activeName: 'All',
      questionSorts: [],
      allQuestion: [],
      question: [],
      sortIndex: '',
      details: []
    }
  },
  components: {
    HeadTabar,
    questionDetails
  },
  methods: {
    handleClick(tab, event) {
      if (tab.label != '所有题目') {
        let i;
        for (i = 0; i < this.questionSorts.length; i++) {
          if (this.questionSorts[i].questionSortName == tab.label) {
            break
          }
        }
        axios('/question/show/sort', {
          params: {
            courseId: localStorage.getItem('courseIndex'),
            questionSortId: this.questionSorts[i].questionSortId,
            isDelete: 0
          },
          method: 'get'
        }).then(res => {
          this.question = res.data.data
        }).catch(function (error) {
          console.log(error);
        });
      }
    },
    handleClick2(row) {
      this.$store.commit('updateQuestionId', row.questionId)
      this.$router.push('/QuestionDetails')
    },
    toAdd() {
      this.$router.push('/AddQuestion')
    },
    deleteQuestion(row) {
      axios('/question/delete/logic', {
        params: {
          questionId:row.questionId,
          flag: true
        },
        method: 'post'
      }).then(res => {
        location.reload()
      }).catch(function (error) {
        console.log(error);
      });
    },
    toRecycleBin(){
      this.$router.push('/RecycleQuestion')
    },
    returnUrl(){
      this.$router.push('/Teaching/TSectionindex')
    }
  },
  mounted() {
    axios('/question/sort/show', {
      method: 'get'
    }).then(res => {
      this.questionSorts = res.data.data
    }).catch(function (error) {
      console.log(error);
    });

    axios('/question/show', {
      params: {
        courseId: localStorage.getItem('courseIndex'),
        isDelete: 0
      },
      method: 'get'
    }).then(res => {
      this.allQuestion = res.data.data
    }).catch(function (error) {
      console.log(error);
    });
  }
}
</script>

<style scoped>

</style>
